<template>
  <div class="container">
    <n-page-header @back="toBack">
      <template #title>
        <n-text v-if="userStore.profile?.id != null && userStore.profile?.id == fetchData?.message?.receive_user_id">
          来自一名网友的咨询
        </n-text>
        <n-text v-else-if="userStore.profile?.id != null && userStore.profile?.id == fetchData?.message?.user_id">
          你扔出的漂流瓶
        </n-text>
        <n-text v-else>
          来自一名网友的漂流瓶
        </n-text>
      </template>

      <template #extra v-if="userStore.profile?.id != null &&
       userStore.profile?.id != fetchData?.message?.user_id &&
        userStore.profile?.id != fetchData?.message?.receive_user_id">
          <n-button @click="discard">扔回海里</n-button>
      </template>
    </n-page-header>
    <div class="content">
      <n-card :bordered="false" embedded>
        {{fetchData?.message?.content}}
      </n-card>
      <n-p style="text-align: end">{{fetchData?.message.date}}</n-p>
    </div>
    <div class="reply">
      <n-space vertical>
        <n-input v-model:value="replyContent"
                 placeholder="在这里，你可以回复这个漂流瓶"
                 type="textarea"
                 maxlength="500"
                 show-count
        />
        <n-button type="primary" @click="reply" :loading="replyRequesting" :disabled="replyRequesting">回复</n-button>
      </n-space>
    </div>
    <div class="reply-list" v-if="!requesting">
      <n-h3 prefix="bar">回复列表</n-h3>
      <div class="no-reply" v-if="fetchData.reply_list.length == 0">
        <n-p depth="3">
          暂时还没有回复
        </n-p>
      </div>
      <n-list v-else>
        <n-list-item
            v-for="(item, index) in fetchData?.reply_list"
            :key="index"
        >
          <n-thing>
            <template #header>
              {{ (item.user_id == userStore.profile.id ? '你' : '瓶友') + "：" }}
            </template>
            <template #header-extra>
              {{item.date}}
            </template>
            <template #description>
              <div class="pre-text">
                {{item.content}}
              </div>
            </template>
          </n-thing>
        </n-list-item>
      </n-list>
    </div>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {useRequests} from "@/common/requests.js";
import {useMessage, useNotification} from "naive-ui";
import {ref} from "vue";
import {useUserStore} from "@/stores/user.js";

const route = useRoute()
const router = useRouter()
const requests = useRequests()
const message = useMessage()
const notify = useNotification()

const userStore = useUserStore()

const fetch = () => {
  requesting.value = true
  requests.message.detail(route.params.id).then(resp => {
    requesting.value = false
    if (resp.ret === 0) {
      fetchData.value = {...fetchData.value, ...resp.data}
    } else {
      message.error(resp?.data ?? resp?.msg ?? '未知错误')
    }
  }).catch(err => {
    requesting.value = false

    console.log(err)
    notify.error({content: '出错了', meta: err.toString(), duration: 1500})
  })
}

const discard = () => {
  requesting.value = true
  requests.message.discard({id: route.params.id}).then(resp => {
    requesting.value = false
    if (resp.ret === 0) {
      router.back()
    } else {
      message.error(resp?.data ?? resp?.msg ?? '未知错误')
    }
  }).catch(err => {
    requesting.value = false

    console.log(err)
    notify.error({content: '出错了', meta: err.toString(), duration: 1500})
  })
}

const reply = () => {
  if (replyContent.value == null || replyContent.value.length == 0) {
    return message.error('请输入回复内容')
  }

  replyRequesting.value = true
  requests.message.reply({
    message_id: route.params.id,
    content: replyContent.value
  }).then(resp => {
    replyRequesting.value = false
    if (resp.ret === 0) {
      replyContent.value = null
      message.success('回复成功')
      fetch()
    } else {
      message.error(resp?.data ?? resp?.msg ?? '未知错误')
    }
  }).catch(err => {
    replyRequesting.value = false

    console.log(err)
    notify.error({content: '出错了', meta: err.toString(), duration: 1500})
  })
}

const toBack = () => {
  router.back()
}

const requesting = ref(false)
const fetchData = ref({})

const replyRequesting = ref(false)
const replyContent = ref(null)


fetch()
</script>

<style lang="scss" scoped>
.container {
  .content {
    white-space: pre-wrap;
  }

  .content, .reply, .reply-list {
    margin-top: 1.5rem;

    .pre-text {
      white-space: pre-wrap;
    }
  }

  .reply {
    margin-top: 2rem;
  }

  .reply-list {
    .no-reply {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
